<template>
  <view class="tab-item">
    <view class="card">
      <view class="question-item border-bottom">
        <view class="form-title first">请依次选择三项能够影响您选择工作的关键因素</view>
        <view
          class="radio-item"
          :class="{ chose: factor.indexOf(item.key) !== -1 }"
          v-for="item in question.affectList"
          :key="item.key"
        >
          <text class="check">
            <text class v-text="getOrder(item.key)"></text>
          </text>
          <text class="radio-text">{{item.label}}</text>
        </view>
      </view>
      <view class="question-item border-bottom">
        <view class="form-title">请依次选择三项您希望从企业中得到的</view>
        <view
          class="radio-item"
          :class="{ chose: get.indexOf(item.key) !== -1 }"
          v-for="item in question.getList"
          :key="item.key"
        >
          <text class="check">
            <text class v-text="getOrderGet(item.key)"></text>
          </text>
          <text class="radio-text">{{item.label}}</text>
        </view>
      </view>
      <view class="form-title">请用几个词形容一下您自己；您最不能容忍的一件事情是什么？</view>
      <view class="desc border-bottom">{{info.introduction}}</view>
      <view class="form-title">请简述您未来3-5年的职业规划</view>
      <view class="desc border-bottom">{{info.careerPlanning}}</view>
      <view class="form-title">请描述一下您上一份工作的工作时间、薪酬情况、福利情况以及您对下一份工作的薪酬期望</view>
      <view class="desc">{{info.remuneration}}</view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      question: {
        affectList: [
          {
            key: "1",
            label: "个人的发展前景"
          },
          {
            key: "2",
            label: "薪酬福利"
          },
          {
            key: "3",
            label: "工作地点时间"
          },
          {
            key: "4",
            label: "稳定的工作"
          },
          {
            key: "5",
            label: "和谐的工作环境"
          },
          {
            key: "6",
            label: "企业的发展前景"
          },
          {
            key: "7",
            label: "企业的公众形象"
          },
          {
            key: "8",
            label: "专业对口"
          },
          {
            key: "9",
            label: "其他"
          }
        ],
        getList: [
          {
            key: "1",
            label: "超高的经济回报"
          },
          {
            key: "2",
            label: "良好的专业技术"
          },
          {
            key: "3",
            label: "先进的管理办法"
          },
          {
            key: "4",
            label: "较高的职位"
          },
          {
            key: "5",
            label: "较强的综合能力"
          },
          {
            key: "6",
            label: "发挥自我的能力"
          },
          {
            key: "7",
            label: "较高的社会地位"
          },
          {
            key: "8",
            label: "培训机会"
          },
          {
            key: "9",
            label: "其他"
          }
        ]
      },
      factor: [],
      get: []
    };
  },
  watch: {
    info() {
      this.factor = this.info.criticalFactor ? this.info.criticalFactor.split(",") : [];
      this.get = this.info.hopeFromCompany ? this.info.hopeFromCompany.split(",") : [];
      console.log(this.info,this.factor)
    }
  },
  methods: {
    getOrder(key) {
      let index = this.factor.findIndex(ele => {
        return ele === key;
      });
      return index !== -1 ? index + 1 : "";
    },
    getOrderGet(key) {
      let index = this.get.findIndex(ele => {
        return ele === key;
      });
      return index !== -1 ? index + 1 : "";
    }
  }
};
</script>

<style lang="scss" scoped>
.tab-item {
  margin-bottom: 40rpx;
}
.white-title {
  font-size: 36rpx;
  color: #fff;
  margin-bottom: 16rpx;
}
.form-title {
  color: #6f6e6e;
  font-size: 28rpx;
  line-height: 18px;
  margin: 24rpx 0 16rpx 0;
  &.first {
    margin-top: 0;
  }
}
.desc {
  margin: 24rpx 0 32rpx 0;
  color: #000;
  font-size: 28rpx;
}
.border-bottom::before {
  border-bottom: 2rpx solid #ededf1;
  transform-origin: 0 100%;
}
.border-bottom {
  padding-bottom: 32rpx;
}
.question-item {
  &.border-bottom {
    padding-bottom: 24rpx;
  }
  &.first {
    padding-top: 0;
  }
  .radio-item {
    display: flex;
    align-items: center;
    line-height: 48rpx;
    color: #b2b2b2;
    .check {
      display: inline-block;
      margin-right: 16rpx;
      width: 32rpx;
      height: 32rpx;
      line-height: 28rpx;
      border-radius: 50%;
      border: 1px solid rgba(178, 178, 178, 1);
      text-align: center;
    }
    &.chose {
      color: #333;
      .check {
        background-color: #ee3c1c;
        color: #fff;
        border-color: #ee3c1c;
      }
    }
  }
}
.tab-item {
  margin-top: 32rpx;
  margin: 32rpx;
  .title {
    margin: 40rpx 32rpx 16rpx 0;
    font-size: 16px;
    color: #000;
  }
}
.card {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 32rpx 24rpx;
  box-shadow: 0 6rpx 10rpx 0 rgba(10,33,89,0.1);
}
</style>
